<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新年大吉</title>
		<link rel="website icon" type="png" href="img/icon.png" />
		<style type="text/css">
			*{
				margin: 0; padding: 0;
				box-sizing: border-box;
			}
			body{
				display: flex; justify-content: center;
				align-items: center; min-height: 100vh;
				overflow: hidden; background: #222;
			}
			h2{
				position: relative; font-size: 3em;
				color: #fff; font-weight: bold;
				line-height: 1.25em; text-transform: uppercase;
				letter-spacing: 0.2em; text-align: center;
			}
			h2 span{
				font: 4.5em bold;
				color: transparent;
				-webkit-text-stroke: 2px #fff;
			}
			.spark{
				position: absolute;
				width: 40px; height: 40px;
			}
			.spark span{
				position: absolute; width: 1px; height: 20px;
				pointer-events: none;
				transform-origin: bottom;
				overflow: hidden;
			}
			.spark span::before{
				content: ''; position: absolute;
				width: 100%; height: 100%;
				background: #0f0;
				animation: animate 2s ease-in-out forwards;
			}
			@keyframes animate{
				0%{
					transform: translateY(100%);
				}
				100%{
					transform: translateY(-101%);
				}
			}
		</style>
		<script>
			function createSpark() {
			    const spark = document.createElement('div');
			    spark.classList.add('spark');
			    let x = Math.random() * window.innerWidth;
			    let y = Math.random() * window.innerHeight;
			    spark.style.left = x + 'px';
			    spark.style.top = y + 'px';
			    spark.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
			    spark.style.transform = `scale(${Math.random() * 5})`;
			    for (let i = 0; i <= 7; i++) {
			        let span = document.createElement('span');
			        span.style.transform = `rotate(${i * 45}deg)`;
			        spark.appendChild(span);
			    }
			    document.body.appendChild(spark);
			    setTimeout(() => {
			        spark.remove();
			    }, 2000);
			}
			
			setInterval(createSpark, 200);
		</script>
	</head>
	<body>
		<div class="spark"><span></span></div>
		<h2><span>2025</span><br>学习顺利 新年大吉!</h2>
	</body>
</html>
